<template>
	<div class="main">
		<div class="user_container">
			<div class="user_info">
				<van-image round fit="cover" width="0.8rem" height="0.8rem" src="https://img.yzcdn.cn/vant/cat.jpeg" />
				<div class="user_name" @click="goTo('/login')">{{nickName}}</div>
			</div>
			<div class="order">
				<div class="header" @click="goTo('/account')">
					<div class="my_account">账号管理</div>
					<van-icon name="arrow" />
				</div>
				<van-divider :hairline="false" />
				<div class="body">
					<ul class="user-list">
						<li class="van-hairline--bottom" @click="goTo('/myPublish')">
							<span>我的发布</span>
							<van-icon name="arrow" />
						</li>
						<li class="van-hairline--bottom" @click="goTo('/myOrder')">
							<span>我的订单</span>
							<van-icon name="arrow" />
						</li>
						<li class="van-hairline--bottom" @click="goTo('/addressList')">
							<span>地址管理</span>
							<van-icon name="arrow" />
						</li>
						<li @click="goTo('/about')">
							<span>关于我们</span>
							<van-icon name="arrow" />
						</li>
					</ul>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup>
import { reactive, toRefs, onMounted, computed, getCurrentInstance, watch, defineEmits, ref } from 'vue';
import { useStore } from 'vuex';
const { proxy } = getCurrentInstance();
const data = reactive({
	nickName:'',
});
const {nickName} = toRefs(data);
data.nickName = proxy.$store.state.user.userInfo.uname || '未登录'
const emit = defineEmits(['loading']);
onMounted(() => {
	// 初始化活动状态
	emit('loading');
});

const goTo = (r, query) => {
	proxy.$router.push({ path: r, query: query || {} });
};
</script>

<style lang="scss" scoped>
.main {
	background-color: black;
	padding-top: 100px;
	position: relative;
	.user_container {
		border-top-left-radius: 5px;
		border-top-right-radius: 5px;
		background-color: white;
		min-height: 78vh;
		width: 100vw;
		padding: 60px 18px 0px 18px;
		.user_info {
			padding: 35px * 0.5 42px * 0.5;
			position: absolute;
			top: 40px;
			display: flex;

			.user_name {
				padding-top: 18px;
				margin-left: 20px;
				font-size: 14px;
				font-weight: bold;
				color: white;
				letter-spacing: 2px;
			}
		}
		.order {
			display: flex;
			flex-direction: column;
			border-radius: 5px;
			margin: 0px 20px;
			.header {
				display: flex;
				justify-content: space-between;
				align-items: center;
				.my_account {
					font-size: 18px;
					font-weight: bold;
				}
			}
			.body {
				.user-list {
					li {
						height: 40px;
						line-height: 40px;
						display: flex;
						justify-content: space-between;
						font-size: 14px;
						.van-icon-arrow {
							margin-top: 13px;
						}
					}
				}
			}
		}
	}
}
</style>
